<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯云COS连接测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #3b82f6;
      border-bottom: 2px solid #3b82f6;
      padding-bottom: 10px;
    }
    
    .config-section {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .config-item {
      margin-bottom: 8px;
    }
    
    .key {
      font-weight: bold;
      color: #4b5563;
    }
    
    .result-section {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    #result {
      font-size: 18px;
      padding: 10px;
      border-radius: 4px;
      text-align: center;
      margin-bottom: 10px;
    }
    
    #result.success {
      background-color: #d1fae5;
      color: #065f46;
    }
    
    #result.failure {
      background-color: #fee2e2;
      color: #b91c1c;
    }
    
    #result.pending {
      background-color: #e5e7eb;
      color: #4b5563;
    }
    
    .log-section {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 15px;
    }
    
    .log-title {
      margin-top: 0;
      margin-bottom: 10px;
      color: #4b5563;
      font-size: 16px;
    }
    
    #log {
      background-color: #1e293b;
      color: #e2e8f0;
      border-radius: 4px;
      padding: 10px;
      height: 300px;
      overflow-y: auto;
      font-family: monospace;
      line-height: 1.5;
    }
    
    .log-info {
      color: #e2e8f0;
    }
    
    .log-warning {
      color: #fbbf24;
    }
    
    .log-error {
      color: #ef4444;
    }
    
    .btn {
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .btn:hover {
      background-color: #2563eb;
    }
    
    .actions {
      display: flex;
      justify-content: center;
      margin: 20px 0;
      gap: 10px;
    }
  </style>
</head>
<body>
  <h1>腾讯云COS连接测试</h1>
  
  <div class="config-section">
    <h2>测试配置</h2>
    
    <div class="config-item">
      <span class="key">存储桶:</span> mybox-1257251314
    </div>
    
    <div class="config-item">
      <span class="key">地区:</span> ap-chengdu
    </div>
    
    <div class="config-item">
      <span class="key">路径前缀:</span> www/educoder/file/
    </div>
    
    <div class="config-item">
      <span class="key">直链域名:</span> https://mybox-1257251314.cos.ap-chengdu.myqcloud.com
    </div>
    
    <div class="config-item">
      <span class="key">CDN域名:</span> https://cos.roginx.ink
    </div>
  </div>
  
  <div class="result-section">
    <div id="result" class="pending">测试进行中，请稍候...</div>
    
    <div class="actions">
      <button class="btn" onclick="window.location.reload()">重新测试</button>
      <button class="btn" onclick="window.location = '/cos-test'">进入COS测试页面</button>
      <button class="btn" onclick="window.location = '/'">返回主页</button>
      <button class="btn" onclick="testDirectFile()">测试文件直接访问</button>
    </div>
  </div>
  
  <div class="log-section">
    <h3 class="log-title">测试日志</h3>
    <div id="log"></div>
  </div>
  
  <script src="test-cos.js"></script>
  <script>
    // 直接测试文件访问
    function testDirectFile() {
      const directUrl = 'https://mybox-1257251314.cos.ap-chengdu.myqcloud.com/www/educoder/file/test.txt';
      const cdnUrl = 'https://cos.roginx.ink/www/educoder/file/test.txt';
      
      document.getElementById('log').innerHTML = '';
      document.getElementById('result').className = 'pending';
      document.getElementById('result').textContent = '正在直接测试文件访问...';
      
      addLog(`尝试直接访问: ${directUrl}`);
      
      fetch(directUrl)
        .then(response => {
          addLog(`直接链接响应状态: ${response.status}`);
          if (response.ok) {
            return response.text();
          }
          throw new Error(`HTTP错误! 状态码: ${response.status}`);
        })
        .then(text => {
          addLog(`成功读取文件! 内容: \n${text.substring(0, 100)}...`);
          
          // 测试CDN
          addLog(`尝试通过CDN访问: ${cdnUrl}`);
          return fetch(cdnUrl);
        })
        .then(response => {
          addLog(`CDN链接响应状态: ${response.status}`);
          if (response.ok) {
            return response.text();
          }
          throw new Error(`CDN HTTP错误! 状态码: ${response.status}`);
        })
        .then(text => {
          addLog(`成功通过CDN读取文件! 内容长度: ${text.length} 字节`);
          document.getElementById('result').className = 'success';
          document.getElementById('result').textContent = '✅ 文件访问测试通过!';
        })
        .catch(error => {
          addLog(`错误: ${error.message}`, 'error');
          document.getElementById('result').className = 'failure';
          document.getElementById('result').textContent = `❌ 测试失败: ${error.message}`;
        });
    }
    
    // 添加日志
    function addLog(message, type = 'info') {
      const logElement = document.getElementById('log');
      if (!logElement) return;
      
      const logItem = document.createElement('div');
      logItem.className = `log-item log-${type || 'info'}`;
      logItem.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      
      logElement.appendChild(logItem);
      logElement.scrollTop = logElement.scrollHeight;
    }
  </script>
</body>
</html> 